<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>提示词录入页面</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      .form-group {
        margin-bottom: 15px;
      }
      label {
        display: block;
        margin-bottom: 5px;
      }
      input[type="text"],
      textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      /* 将下拉和示例图标放在同一行 */
      .scenario-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }
      .scenario-row select {
        flex: 1 1 auto;
      }
      /* 使图标按钮更明显 */
      #showExampleBtn svg {
        width: 20px;
        height: 20px;
      }
      #showExampleBtn {
        background: #eefaf0;
        border: 1px solid #c8e6c9;
        padding: 6px 8px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      #showExampleBtn:hover {
        background: #e2f6e7;
      }
      button {
        background-color: #4caf50;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background-color: #3e8e41;
      }
      /* 确保示例弹窗的文字颜色不会被按钮的白色字体覆盖，且内容左对齐、友好换行 */
      #exampleBox {
        color: #111;
        font-size: 14px;
        line-height: 1.5;
        white-space: normal;
        text-align: left;
        word-break: break-word;
        hyphens: auto;
      }
      #promptResult {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
      }
    </style>
  </head>
  <body>
    <h1>提示词录入页面</h1>

    <div class="form-group scenario-row">
      <select id="scenario" name="scenario">
        <option value="">请选择场景</option>
        <option value="RTF">
          RTF｜角色与格式｜明确的专业角色，结构化输出｜岗位说明书
        </option>
        <option value="CTF">
          CTF｜背景与情境｜任务成功依赖于上下文信息｜项目背景简报
        </option>
        <option value="TREF">
          TREF｜要求与精度｜有严格标准和规格的交付任务｜技术需求规格书
        </option>
        <option value="GRADE">
          GRADE｜拆解与示例｜复杂或新任务，需要逐步引导｜教学手册或教程
        </option>
        <option value="PECRA">
          PECRA｜目的与战略｜开放性战略问题，需要全局规划｜战略咨询顾问
        </option>
      </select>
      <!-- 将示例图标按钮放到下拉框右侧 -->
      <button
        id="showExampleBtn"
        type="button"
        aria-label="查看场景示例"
        aria-expanded="false"
        title="查看场景示例"
        style="position: relative"
      >
        <!-- 简单信息图标 -->
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <circle
            cx="12"
            cy="12"
            r="10"
            stroke="#4caf50"
            stroke-width="1.5"
            fill="#fff"
          />
          <rect x="11" y="10" width="2" height="6" rx="1" fill="#4caf50" />
          <rect x="11" y="7" width="2" height="2" rx="1" fill="#4caf50" />
        </svg>
        <!-- 弹窗放在按钮内部，便于使用 position:absolute 相对定位 -->
        <div
          id="exampleBox"
          style="
            display: none;
            position: absolute;
            right: 0;
            top: 36px;
            z-index: 10;
            background: #fff;
            border: 1px solid #ccc;
            padding: 12px;
            border-radius: 6px;
            min-width: 320px;
            max-width: 500px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          "
        ></div>
      </button>
    </div>

    <div id="formContainer">
      <!-- 表单将动态加载到这里 -->
    </div>

    <button onclick="generatePrompt()">生成提示词</button>

    <div id="promptResult">
      <h3>生成的提示词:</h3>
      <p id="promptText"></p>
    </div>

    <script>
      const formContainer = document.getElementById("formContainer");
      const scenarioSelect = document.getElementById("scenario");
      let currentForm = null;

      scenarioSelect.addEventListener("change", function () {
        const selectedScenario = scenarioSelect.value;
        formContainer.innerHTML = "";
        currentForm = null;
        if (selectedScenario) {
          currentForm = createForm(selectedScenario);
          formContainer.appendChild(currentForm);
        }
        // 切换场景时，立即更新示例弹窗内容（如果弹窗已显示）
        if (exampleBox.style.display === "block") {
          updateExampleBox();
        }
      });

      function createForm(scenario) {
        const form = document.createElement("form");
        form.id = scenario + "Form";
        // 示例内容
        const examples = {
          RTF: `举例：写一篇博客文章<br>• 角色：资深自媒体作家<br>• 任务：编写一篇关于新产品的博客文章<br>• 格式：800字，包括三个主要段落和一张产品图片<br>提示词示例：作为资深自媒体作家，您的任务是编写一篇800字的博客文章，介绍我们的新产品。文章应包括三个主要段落和一张产品图片。`,
          CTF: `举例：写一个汇报邮件<br>• 背景：团队完成了项目的第一阶段<br>• 任务：汇报项目的进展情况<br>• 格式：电子邮件格式，包括关键成就和下一步计划<br>提示词示例：在成功完成项目第一阶段之后，请通过电子邮件汇报我们的进展情况。邮件应包括关键成就和下一步计划。`,
          TREF: `举例：给同事发送感谢邮件<br>• 任务：给协助完成项目的同事发送感谢邮件<br>• 要求：表达诚挚的感谢和赞赏<br>• 期望：增强团队凝聚力<br>• 格式：简短的电子邮件<br>提示词示例：请给协助我们完成项目的同事发送一封感谢邮件。邮件应简短，表达诚挚的感谢和赞赏，以增强团队凝聚力。`,
          GRADE: `举例：新产品竞品分析<br>• 目标：分析新产品的主要竞争对手<br>• 请求：收集竞品的特性、价格和市场定位<br>• 行动：比较竞品和我们的产品<br>• 细节：专注于消费者可能关心的关键特点<br>• 示例：产品A比我们的产品贵20%，但其电池续航能力较弱。<br>提示词示例：我们的目标是分析新产品的主要竞争对手。请收集竞品的特性、价格和市场定位，并将之与我们的产品进行比较。请专注于消费者可能关心的关键特点，例如‘产品A比我们的产品贵20%，但其电池续航能力较弱。’`,
          PECRA: `举例：新产品目标市场分析<br>• 目的：识别新产品的目标市场和理想消费者<br>• 期望：形成全面的市场画像，为营销战略提供准确方向<br>• 背景：新产品即将上市，需要了解潜在客户的需求和期望<br>• 请求：收集和分析目标市场的人口统计数据，包括年龄、性别、收入、消费习惯等<br>• 行动：制定一项调查或研究计划，实施并整理结果<br>提示词示例：我们的目的是识别新产品的目标市场和理想消费者。考虑到新产品即将上市，我们期望通过全面分析市场画像来为我们的营销战略提供准确的方向。请求您收集和分析目标市场的人口统计数据，包括年龄、性别、收入和消费习惯等，并制定一项调查或研究计划，实施并整理结果。`,
        };
        // 表单内容
        let html = "";
        switch (scenario) {
          case "RTF":
            html = `
              <div class=\"form-group\">
                <label for=\"rtfRole\">角色（Role）:</label>
                <input type=\"text\" id=\"rtfRole\" name=\"rtfRole\">
              </div>
              <div class=\"form-group\">
                <label for=\"rtfTask\">任务（Task）:</label>
                <textarea id=\"rtfTask\" name=\"rtfTask\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"rtfFormat\">格式（Format）:</label>
                <input type=\"text\" id=\"rtfFormat\" name=\"rtfFormat\">
              </div>
            `;
            break;
          case "CTF":
            html = `
              <div class=\"form-group\">
                <label for=\"ctfContext\">背景（Context）:</label>
                <textarea id=\"ctfContext\" name=\"ctfContext\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"ctfTask\">任务（Task）:</label>
                <textarea id=\"ctfTask\" name=\"ctfTask\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"ctfFormat\">格式（Format）:</label>
                <input type=\"text\" id=\"ctfFormat\" name=\"ctfFormat\">
              </div>
            `;
            break;
          case "TREF":
            html = `
              <div class=\"form-group\">
                <label for=\"trefTask\">任务（Task）:</label>
                <textarea id=\"trefTask\" name=\"trefTask\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"trefRequirements\">要求（Requirements）:</label>
                <textarea id=\"trefRequirements\" name=\"trefRequirements\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"trefExpectations\">期望（Expectations）:</label>
                <textarea id=\"trefExpectations\" name=\"trefExpectations\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"trefFormat\">格式（Format）:</label>
                <input type=\"text\" id=\"trefFormat\" name=\"trefFormat\">
              </div>
            `;
            break;
          case "GRADE":
            html = `
              <div class=\"form-group\">
                <label for=\"gradeGoal\">目标（Goal）:</label>
                <textarea id=\"gradeGoal\" name=\"gradeGoal\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"gradeRequest\">请求（Request）:</label>
                <textarea id=\"gradeRequest\" name=\"gradeRequest\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"gradeAction\">行动（Action）:</label>
                <textarea id=\"gradeAction\" name=\"gradeAction\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"gradeDetails\">细节（Details）:</label>
                <textarea id=\"gradeDetails\" name=\"gradeDetails\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"gradeExample\">示例（Example）:</label>
                <textarea id=\"gradeExample\" name=\"gradeExample\"></textarea>
              </div>
            `;
            break;
          case "PECRA":
            html = `
              <div class=\"form-group\">
                <label for=\"pecraPurpose\">目的（Purpose）:</label>
                <textarea id=\"pecraPurpose\" name=\"pecraPurpose\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"pecraExpectations\">期望（Expectations）:</label>
                <textarea id=\"pecraExpectations\" name=\"pecraExpectations\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"pecraContext\">背景（Context）:</label>
                <textarea id=\"pecraContext\" name=\"pecraContext\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"pecraRequest\">请求（Request）:</label>
                <textarea id=\"pecraRequest\" name=\"pecraRequest\"></textarea>
              </div>
              <div class=\"form-group\">
                <label for=\"pecraAction\">行动（Action）:</label>
                <textarea id=\"pecraAction\" name=\"pecraAction\"></textarea>
              </div>
            `;
            break;
        }
        form.innerHTML = html;
        // 设置当前场景示例
        form.dataset.example = examples[scenario] || "";
        return form;
      }
      // 示例弹窗逻辑
      const showExampleBtn = document.getElementById("showExampleBtn");
      const exampleBox = document.getElementById("exampleBox");
      function updateExampleBox() {
        const scenario = scenarioSelect.value;
        // 直接从 createForm 的 examples 获取，避免 dataset 丢失
        const examples = {
          RTF: `举例：写一篇博客文章<br>• 角色：资深自媒体作家<br>• 任务：编写一篇关于新产品的博客文章<br>• 格式：800字，包括三个主要段落和一张产品图片<br>提示词示例：作为资深自媒体作家，您的任务是编写一篇800字的博客文章，介绍我们的新产品。文章应包括三个主要段落和一张产品图片。`,
          CTF: `举例：写一个汇报邮件<br>• 背景：团队完成了项目的第一阶段<br>• 任务：汇报项目的进展情况<br>• 格式：电子邮件格式，包括关键成就和下一步计划<br>提示词示例：在成功完成项目第一阶段之后，请通过电子邮件汇报我们的进展情况。邮件应包括关键成就和下一步计划。`,
          TREF: `举例：给同事发送感谢邮件<br>• 任务：给协助完成项目的同事发送感谢邮件<br>• 要求：表达诚挚的感谢和赞赏<br>• 期望：增强团队凝聚力<br>• 格式：简短的电子邮件<br>提示词示例：请给协助我们完成项目的同事发送一封感谢邮件。邮件应简短，表达诚挚的感谢和赞赏，以增强团队凝聚力。`,
          GRADE: `举例：新产品竞品分析<br>• 目标：分析新产品的主要竞争对手<br>• 请求：收集竞品的特性、价格和市场定位<br>• 行动：比较竞品和我们的产品<br>• 细节：专注于消费者可能关心的关键特点<br>• 示例：产品A比我们的产品贵20%，但其电池续航能力较弱。<br>提示词示例：我们的目标是分析新产品的主要竞争对手。请收集竞品的特性、价格和市场定位，并将之与我们的产品进行比较。请专注于消费者可能关心的关键特点，例如‘产品A比我们的产品贵20%，但其电池续航能力较弱。’`,
          PECRA: `举例：新产品目标市场分析<br>• 目的：识别新产品的目标市场和理想消费者<br>• 期望：形成全面的市场画像，为营销战略提供准确方向<br>• 背景：新产品即将上市，需要了解潜在客户的需求和期望<br>• 请求：收集和分析目标市场的人口统计数据，包括年龄、性别、收入、消费习惯等<br>• 行动：制定一项调查或研究计划，实施并整理结果<br>提示词示例：我们的目的是识别新产品的目标市场和理想消费者。考虑到新产品即将上市，我们期望通过全面分析市场画像来为我们的营销战略提供准确的方向。请求您收集和分析目标市场的人口统计数据，包括年龄、性别、收入和消费习惯等，并制定一项调查或研究计划，实施并整理结果。`,
        };
        if (!scenario || !examples[scenario]) {
          exampleBox.innerHTML = "请先选择场景";
        } else {
          exampleBox.innerHTML = examples[scenario];
        }
      }
      // 切换为点击打开/关闭示例弹窗（代替 hover）
      showExampleBtn.addEventListener("click", function (e) {
        e.stopPropagation();
        const isOpen = exampleBox.style.display === "block";
        if (isOpen) {
          exampleBox.style.display = "none";
          showExampleBtn.setAttribute("aria-expanded", "false");
        } else {
          updateExampleBox();
          exampleBox.style.display = "block";
          showExampleBtn.setAttribute("aria-expanded", "true");
        }
      });
      // 点击页面任意处关闭弹窗（如果打开）
      document.addEventListener("click", function (e) {
        if (
          !showExampleBtn.contains(e.target) &&
          exampleBox.style.display === "block"
        ) {
          exampleBox.style.display = "none";
          showExampleBtn.setAttribute("aria-expanded", "false");
        }
      });
      // 按 Esc 关闭
      document.addEventListener("keydown", function (e) {
        if (e.key === "Escape" && exampleBox.style.display === "block") {
          exampleBox.style.display = "none";
          showExampleBtn.setAttribute("aria-expanded", "false");
        }
      });

      function generatePrompt() {
        const scenario = scenarioSelect.value;
        let prompt = "";
        if (!scenario) {
          document.getElementById("promptText").innerText = "请先选择使用场景";
          return;
        }
        switch (scenario) {
          case "RTF": {
            const role = document.getElementById("rtfRole").value.trim();
            const task = document.getElementById("rtfTask").value.trim();
            const format = document.getElementById("rtfFormat").value.trim();
            prompt = `作为${role}，您的任务是${task}。请按照如下格式完成：${format}`;
            break;
          }
          case "CTF": {
            const context = document.getElementById("ctfContext").value.trim();
            const task = document.getElementById("ctfTask").value.trim();
            const format = document.getElementById("ctfFormat").value.trim();
            prompt = `在${context}背景下，请${task}。请按照如下格式完成：${format}`;
            break;
          }
          case "TREF": {
            const task = document.getElementById("trefTask").value.trim();
            const requirements = document
              .getElementById("trefRequirements")
              .value.trim();
            const expectations = document
              .getElementById("trefExpectations")
              .value.trim();
            const format = document.getElementById("trefFormat").value.trim();
            prompt = `请${task}。要求：${requirements}。期望：${expectations}。格式：${format}`;
            break;
          }
          case "GRADE": {
            const goal = document.getElementById("gradeGoal").value.trim();
            const request = document
              .getElementById("gradeRequest")
              .value.trim();
            const action = document.getElementById("gradeAction").value.trim();
            const details = document
              .getElementById("gradeDetails")
              .value.trim();
            const example = document
              .getElementById("gradeExample")
              .value.trim();
            prompt = `目标：${goal}。请求：${request}。行动：${action}。细节：${details}。示例：${example}`;
            break;
          }
          case "PECRA": {
            const purpose = document
              .getElementById("pecraPurpose")
              .value.trim();
            const expectations = document
              .getElementById("pecraExpectations")
              .value.trim();
            const context = document
              .getElementById("pecraContext")
              .value.trim();
            const request = document
              .getElementById("pecraRequest")
              .value.trim();
            const action = document.getElementById("pecraAction").value.trim();
            prompt = `目的：${purpose}。期望：${expectations}。背景：${context}。请求：${request}。行动：${action}`;
            break;
          }
        }
        document.getElementById("promptText").innerText = prompt;
      }
    </script>
  </body>
</html>
